<template>
     <el-dialog
      title="项目详情"
      :visible.sync="dialogVisible"
      width="800px"
      append-to-body
    >
      <el-form
        ref="form"
        :model="form"
        label-width="120px"
        style="width: 700px; padding-left: 50px"
      >
        <table
          class="printTable"
          border="1"
          id="printMe"
          cellspacing="0"
          width="100%"
          height="800px"
        >
          <caption align="top" style="margin-bottom: 30px; font-size: 24px">
            {{
              form.unitTypeName === "施工单位"
                ? "重庆高新开发建设投资集团有限公司非公招项目施工单位抽选结果表"
                : "重庆高新开发建设投资集团有限公司中介机构抽取结果表"
            }}
          </caption>
          <tr>
            <td
              colspan="3"
              style="text-align: left"
              height="40px"
              class="font-FangSong topfont noBorder title-font"
            >
              申请单位：{{ form.createBy }}
            </td>
            <td
              colspan="2"
              style="text-align: right"
              class="topfont noBorder font-FangSong"
            >
              日期：{{ form.createTime | dateTime }}
            </td>
          </tr>
          <tr>
            <th rowspan="3" width="80px" class="bigfont">
              项 目 基
              <br />
              本 情 况
            </th>
            <td width="120px" height="60px" class="small font-SimHei">
              项 目 名 称
            </td>
            <th colspan="3" class="input commonBorder font-FangSong">
              {{ form.extractItem }}
            </th>
          </tr>
          <tr>
            <td class="small font-SimHei">建 设 地 址</td>
            <th colspan="3" class="input commonBorder font-FangSong">
              {{ form.extractAddress }}
            </th>
          </tr>
          <tr>
            <td class="small font-SimHei">
              工 程 费 用
              <br />
              (万 元)
            </td>
            <th width="150px" class="input font-FangSong">
              {{ form.extractPrice }}
            </th>
            <td width="80px" class="small font-SimHei">建 设 周 期</td>
            <th class="input commonBorder font-FangSong">
              {{ form.extractPeriod }}
            </th>
          </tr>
          <tr>
            <th
              :rowspan="form.unitTypeName !== '施工单位' ? rowspanList : 4"
              class="bigfont"
            >
              中 标<br />信 息
            </th>
            <td
              class="small font-SimHei"
              v-if="form.unitTypeName !== '施工单位'"
            >
              抽 取 库
            </td>
            <th
              class="input font-FangSong"
              v-if="form.unitTypeName !== '施工单位'"
            >
              {{ form.unitTypeName }}
            </th>
            <td class="small font-SimHei">暂定中介服务费（万元）</td>
            <th colspan="3" class="input commonBorder font-FangSong">
              {{ form.maxPrice }}
            </th>
          </tr>
          <tr v-if="form.unitTypeName !== '施工单位'">
            <td class="small font-SimHei">业 务 类 型</td>
            <th class="input font-FangSong">{{ form.extractBusinessType }}</th>
            <td class="small font-SimHei">抽 取 时 间</td>
            <th class="input commonBorder font-FangSong">
              {{ form.updateTime | dateTime }}
            </th>
          </tr>
          <tr>
            <td
              colspan="4"
              height="60px"
              class="small commonBorder font-SimHei"
            >
              中 标 单 位 列 表
            </td>
          </tr>
          <tr>
            <td height="60px" class="small font-SimHei">序 号</td>
            <td class="small font-SimHei">单 位 名 称</td>
            <td width="120px" class="small font-SimHei">联 系 人</td>
            <td width="120px" class="small commonBorder font-SimHei">
              联 系 电 话
            </td>
          </tr>
          <tr v-if="items == ''">
            <th height="60px"></th>
            <th></th>
            <th></th>
            <th class="commonBorder"></th>
          </tr>
          <tr v-for="(item, index) in items" :key="item.id">
            <th height="60px" class="input font-FangSong">{{ index + 1 }}</th>
            <th class="input font-FangSong">{{ item.randomUnitName }}</th>
            <th class="input font-FangSong">{{ item.randomLinkman }}</th>
            <th class="input commonBorder font-FangSong">
              {{ item.randomPhone }}
            </th>
          </tr>
          <tr>
            <th rowspan="4" class="bigfont a1">
              参 与 抽
              <br />
              取 人 员
            </th>
            <td class="small font-SimHei">抽 取 地 点</td>
            <th class="input commonBorder font-FangSong" colspan="3">
              {{ form.extractPlace }}
            </th>
          </tr>
          <tr>
            <td class="small font-SimHei">现 场 抽 取 人</td>
            <th colspan="3" class="input commonBorder font-FangSong">
              {{ form.extractUser }}
            </th>
          </tr>
          <tr>
            <td rowspan="2" class="small a1 font-SimHei">
              纪 检 监 察
              <br />
              人 员
            </td>
            <th
              colspan="3"
              rowspan="2"
              class="input commonBorder a1 font-FangSong"
            ></th>
          </tr>
        </table>
      </el-form>
    </el-dialog>
</template>

<script>
export default {
  props: ["form", "items", "resultOpen", "rowspanList"],
  computed: {
    dialogVisible: {
      get() {
        return this.resultOpen
      },
      set(val) {
        this.$emit("update:resultOpen", val);
      }
    }
  },
  filters: {
    dateTime(val) {
      if (val) {
        return val.substr(0, 10);
      }
    },
  }
};
</script>
<style scoped>
.commonWidth {
  width: 300px;
}
::v-deep .el-form {
  padding: 10px;
  margin-bottom: 10px;
}
::v-deep .el-dialog__body {
  text-align: center;
}
::v-deep .el-table .cell {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
::v-deep .el-table .cell:hover {
  white-space: normal;
}
.topfont {
  font-size: 16px;
  font-weight: 400;
}
.small {
  text-align: center;
  font-weight: 100;
  font-size: 16px;
}
.bigfont {
  font-size: 18px;
  font-weight: 100;
  text-align: center;
  font-family: FangSong;
}
.input {
  font-size: 16px;
  font-weight: 400;
}
::v-deep .el-table .denger-row {
  background: #ffe4e1;
}
::v-deep .el-date-editor {
  margin-left: -4px;
}
.printTable {
  border: unset;
}
.noBorder {
  border: unset;
}
.commonBorder {
  border-right: 1px solid #9a9a9a;
}
.a1 {
  border-bottom: 1px solid #9a9a9a;
}
.title-font {
  font-family: FangSong;
}
.font-SimHei {
  font-family: FangSong;
}
.font-FangSong {
  font-family: FangSong;
}
.unitSort-box {
  text-align: left;
}
.unitSort-box li {
  margin-top: 5px;
}
.form-img-out {
  width: 130px;
  height: 130px;
}
.form-img-line {
  width: 500px;
  height: 500px;
}
.form-dialog {
  text-align: center;
}
.on-going-project {
  font-size: 18px;
  color: #303133;
  padding-left: 10px;
}
.going-project-table {
  padding: 20px 30px;
}
::v-deep[data-v-04b6f7de] .el-dialog__body {
  text-align: left;
}
</style>